<script>
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import debounce from '@/sheep/helper/debounce';
  import sheep from '@/sheep';

  export default {
    name: 's-apply-family-member-ship',
    methods: {
      debounce,
      async agreeToJoin(info, index) {
        console.log('同意家庭申请信息 =>', info);
        let { code, msg } = await sheep.$api.family.agree_join({
          family_id: info.data.data[9].value,
          uid: info.data.data[4].value,
        });
        if (code == 1) {
          this.$emit('agreeToJoin', index);
          await this.markRead(index);
          this.$refs[`applyForFamilyMembership`][index].close();
          if (index != this.unread_message.length - 1) {
            this.$refs[`applyForFamilyMembership`][index + 1].open();
          } else {
            sheep.$store('family').clearUnread();
          }
        } else {
          sheep.$helper.toast(msg);
        }
      },
      async agreeToJoinGenealogy(info, index) {
        let { code, msg } = await sheep.$api.genealogy.agree_join({
          genealogy_id: info.genealogy_id,
          uid: info.data.data[4].value,
        });
        this.$refs[`applyForFamilyMembership`][index].close();
        if (code == 1) {
          this.$emit('agreeToJoin', index);
          this.$emit('agreeToJoinGenealogy', index);
          await this.markRead(index);
          if (index != this.unread_message.length - 1) {
            this.$refs[`applyForFamilyMembership`][index + 1].open();
          } else {
            sheep.$store('family').clearUnread();
          }
        } else {
          sheep.$helper.toast(msg);
        }
      },
      closeJoin(index) {
        this.$refs[`applyForFamilyMembership`][index].close();
        this.markRead(index);
        if (index != this.unread_message.length - 1) {
          this.$refs[`applyForFamilyMembership`][index + 1].open();
        } else {
          sheep.$store('family').clearUnread();
        }
      },
      // 将消息变为已读
      async markRead(index) {
        let { code, msg } = await sheep.$api.notice.markRead({ id: this.unread_message[index].notifiable_id });
        if (code == 1) {
          if (index == this.unread_message.length - 1) {
            await sheep.$store('family').getFamilyRemindList();
          }
        } else {
          sheep.$helper.toast(msg);
        }
      },
    },
    components: { ImageAvater, UniPopup },
    computed: {
      unread_message() {
        return sheep.$store('family').unread_message;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
    },
    watch: {
      unread_message: {
        deep: true,
        handler(newVal, oldVal) {
          console.log('监听到的信息', newVal);
          if (newVal.length > 0) {
            this.$nextTick(() => {
              this.$refs.applyForFamilyMembership[0].open();
            });
          }
        },
      },
    },
  };
</script>

<template>
  <view class="applyForFamilyMembership">
    <uni-popup :ref="`applyForFamilyMembership`" v-for="(item,index) in unread_message" :mask-click="false"
               :key="index">
      <!-- 申请加入家庭 -->
      <view class="family_info" v-if="item.type == 'family_new'">
        <view class="top" style="overflow: hidden">
          <view class="title mt_35 ml_24 mr_24" >
            申请加入{{ item.data.data[0].value }}
          </view>
          <view class="hW_30"></view>
          <view class="flex align-center ml_24 mr_24">
            <view class="name style">{{ item.data.data[1].value }}</view>
            <view class="sex style ml_15">{{ item.data.data[3].value }}</view>
            <view class="age style ml_15">{{ item.data.data[5].value }}</view>
            <view class="shengxiao style  ml_15">{{ item.data.data[8].value }}</view>
          </view>
          <view class="hW_11"></view>
          <view class="style ml_24 mr_24">
            {{ item.data.data[6].value }} {{ item.data.data[7].value }}
          </view>
          <view class="hW_11"></view>
          <view class="style ml_24 mr_24 mb_35">
            拾亲号 {{ item.data.data[4].value }}
          </view>
          <image-avater :src="item.data.data[2].value.indexOf('http')!= -1 ?  item.data.data[2].value : `${nc_image}${item.data.data[2].value}`" width="152" height="152" class="imageAvater"></image-avater>
        </view>
        <view class="bottom">
          <view class="text mt_36 ml_25 mr_25">
            {{ item.data.message_text }}
          </view>
          <view class="hW_35"></view>
          <view class="mb_36 ml_25 mr_25 flex align-center justify-between">
            <view class="confirm flex align-center justify-center"
                  @click.stop="debounce(agreeToJoin(item,index),1000,true)">
              同意
            </view>
            <view class="cancel flex align-center justify-center" @click.stop="debounce(closeJoin(index),1000,true)">
              取消
            </view>
          </view>
        </view>
      </view>

      <view class="genealogy_info" v-if="item.type == 'genealogy_new'">
        <view class="top" style="overflow: hidden">
          <view class="title  mt_35 ml_24 mr_24"
                style="width: 350rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;"
          >
            申请加入{{ item.data.data[0].value }}
          </view>
          <view class="hW_30"></view>
          <view class="flex align-center ml_24 mr_24">
            <view class="name style ">{{ item.data.data[1].value }}</view>
            <view class="sex style ml_15">{{ item.data.data[3].value }}</view>
            <view class="age style ml_15">{{ item.data.data[5].value }}</view>
            <view class="shengxiao style  ml_15">{{ item.data.data[8].value }}</view>
          </view>
          <view class="hW_11"></view>
          <view class="style ml_24 mr_24">
            {{ item.data.data[6].value }} {{ item.data.data[7].value }}
          </view>
          <view class="hW_11"></view>
          <view class="style ml_24 mr_24 mb_35">
            拾亲号 {{ item.data.data[4].value }}
          </view>
          <image-avater
            :src="item.data.data[2].value.indexOf('http') != -1 ? item.data.data[2].value : `${nc_image}${item.data.data[2].value}`"
            width="152" height="152" class="imageAvater"></image-avater>
        </view>
        <view class="bottom">
          <view class="text mt_36 ml_25 mr_25">
            {{ item.data.message_text }}
          </view>
          <view class="hW_35"></view>
          <view class="mb_36 ml_25 mr_25 flex items-center justify-between">
            <view class="confirm flex align-center justify-center"
                  @click.stop="debounce(agreeToJoinGenealogy(item,index),1000,true)">
              同意
            </view>
            <view class="cancel flex align-center justify-center"
                  @click.stop="debounce(closeJoin(index),1000,true)">
              取消
            </view>
          </view>
        </view>
      </view>

      <view class="memorialDay flex flex-column align-center" v-if="item.type == 2">
        <image class="icon" :src="`${IMPORTANT_DAY_URL}memorialDay_icon.png`"></image>
        <view class="title flex align-center justify-center">
          纪念日提醒
        </view>
        <view class="hW_12"></view>
        <view class="content">
          {{ item.title }}
        </view>
        <view class="time">
          {{ item.content.public_time }} {{ item.content.lunar_time }} {{ item.content.week_name }}
        </view>
        <view class="description flex items-end justify-around">
          <view class="flex align-center style" style="padding-bottom: 40rpx;">
            <image :src="`${IMPORTANT_DAY_URL}birthdayMessage_ic.png`"></image>
            倒计时
          </view>
          <view class="days">
            {{ item.content.day }}
          </view>
          <view class="style" style="padding-bottom: 40rpx;">
            天
          </view>
        </view>
        <view class="hW_40"></view>
        <view class="confirm flex align-center justify-center" @click.stop="debounce(closeJoin(index),1000,true)">
          已知晓
        </view>
      </view>

      <view class="day flex flex-column align-center" v-if="item.type == 3">
        <image class="icon" :src="`${IMPORTANT_DAY_URL}birthdayMessage_icon.png`"></image>
        <view class="title flex align-center justify-center">
          生日提醒
        </view>
        <view class="hW_12"></view>
        <view class="content">
          {{ item.title }}
        </view>
        <view class="time">
          {{ item.content.public_time }} {{ item.content.lunar_time }} {{ item.content.week_name }}
        </view>
        <view class="description flex items-end justify-around">
          <view class="flex align-center style" style="padding-bottom: 40rpx;">
            <image :src="`${IMPORTANT_DAY_URL}birthdayMessage_ic.png`"></image>
            倒计时
          </view>
          <view class="days">
            {{ item.content.day }}
          </view>
          <view class="style" style="padding-bottom: 40rpx;">
            天
          </view>
        </view>
        <view class="hW_40"></view>
        <view class="confirm flex align-center justify-center" @click.stop="$u.debounce(closeJoin(index),1000,true)">
          已知晓
        </view>
      </view>

      <view class="joinWarn flex flex-column align-center" v-if="item.type == 5">
        <view class="title">
          家庭提醒
        </view>
        <view class="hW_72"></view>
        <view class="content">
          {{ item.title }}
        </view>
        <view class="hW_72"></view>
        <view class="confirm flex align-center justify-center" @click.stop="debounce(toggle(item,index),1000,true)">
          好的
          <!--          <view class="cancel"  @click.stop="$u.debounce(closeJoin(index),1000)">-->
          <!--            取消-->
          <!--          </view>-->
          <!--          <view class="confirm" @click.stop="$u.debounce(toggle(item,index),1000)">-->
          <!--            切换到新的家庭-->
          <!--          </view>-->
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
  .family_info {
    width: 548rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    overflow: hidden;

    .top {
      width: 548rpx;
      background: #FF7950;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      position: relative;

      .title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 37rpx;
        color: #FFFFFF;
      }

      .style {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }

      .imageAvater {
        position: absolute;
        top: 22rpx;
        right: 23rpx;
      }
    }

    .bottom {
      width: 548rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 20rpx 20rpx;

      .text {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 26rpx;
        color: #696969;
      }

      .confirm {
        width: 205rpx;
        height: 80rpx;
        background: #FF4206;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }

      .cancel {
        width: 206rpx;
        height: 80rpx;
        background: #A0A0A0;
        border-radius: 57rpx 57rpx 57rpx 57rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }

  .genealogy_info {
    width: 548rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    overflow: hidden;

    .top {
      width: 548rpx;
      background: #234B7C;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
      position: relative;

      .title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 37rpx;
        color: #FFFFFF;
      }

      .style {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }

      .imageAvater {
        position: absolute;
        top: 22rpx;
        right: 23rpx;
      }
    }

    .bottom {
      width: 548rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 20rpx 20rpx;

      .text {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 26rpx;
        color: #696969;
      }

      .confirm {
        width: 205rpx;
        height: 80rpx;
        background: #FF4206;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }

      .cancel {
        width: 206rpx;
        height: 80rpx;
        background: #A0A0A0;
        border-radius: 57rpx 57rpx 57rpx 57rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
      }
    }
  }

  .joinWarn {
    width: 548rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    overflow: hidden;
    padding: 35rpx 24rpx;

    .title {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 36rpx;
      color: #696969;
      line-height: 0rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .content {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 36rpx;
      color: #696969;
    }

    .confirm {
      width: 205rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .day {
    width: 548rpx;
    padding: 114rpx 24rpx 50rpx 24rpx;
    background: url($uni-bg-url + "/birthdayMessage_bg.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 20rpx;
    position: relative;

    .icon {
      position: absolute;
      top: -160rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 346rpx;
      height: 265rpx;
    }

    .title {
      width: 353rpx;
      height: 70rpx;
      background: #FFFFFF;
      border-radius: 35rpx 35rpx 35rpx 35rpx;
      border: 2rpx solid #FF4206;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 37rpx;
      color: #FF4206;
    }

    .content {
      width: 500rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #50010D;
    }

    .time {
      width: 500rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #50010D;
    }

    .description {
      width: 280rpx;

      image {
        width: 24rpx;
        height: 24rpx;
      }

      .style {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18rpx;
        color: #F15927;
      }

      .days {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 109rpx;
        color: #FF4206;
      }
    }

    .confirm {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;
      border: 2rpx solid #707070;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .memorialDay {
    width: 548rpx;
    padding: 114rpx 24rpx 50rpx 24rpx;
    background: url($uni-bg-url + "/memorialDay_bg.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 20rpx;
    position: relative;

    .icon {
      position: absolute;
      top: -160rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 346rpx;
      height: 265rpx;
    }

    .title {
      width: 353rpx;
      height: 70rpx;
      background: #FFFFFF;
      border-radius: 35rpx 35rpx 35rpx 35rpx;
      border: 2rpx solid #FF4206;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 37rpx;
      color: #FF4206;
    }

    .content {
      width: 500rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #50010D;
    }

    .time {
      width: 500rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #50010D;
    }

    .description {
      width: 280rpx;

      image {
        width: 24rpx;
        height: 24rpx;
      }

      .style {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 18rpx;
        color: #F15927;
      }

      .days {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 109rpx;
        color: #FF4206;
      }
    }

    .confirm {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;
      border: 2rpx solid #707070;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
</style>